<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">


      <el-form-item label="工艺路线名称" prop="routeName">
        <el-input
          v-model="queryParams.routeName"
          placeholder="请输入工艺路线名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="false">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="mainTable" :data="routeList" @selection-change="handleSelectionChange" @row-click="handleRowclick" :highlight-current-row = "true">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" />
      <!-- <el-table-column label="组织" align="center" prop="groupId" /> -->
      <el-table-column label="工艺路线id" align="center" prop="routeId"  />
      <el-table-column label="工艺路线名称" align="center" prop="routeName" />
      <!-- <el-table-column label="工艺路线类型" align="center" prop="routeType" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="handleUpdate(scope.row)"
            v-hasPermi="['system:processroute:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click.stop="handleDelete(scope.row)"
            v-hasPermi="['system:processroute:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-divider></el-divider>

    <el-table v-loading="detailLoading" ref="detailTable" :data="processrouteList" @selection-change="handleSelectionChange">
      <el-table-column label="排序" align="center" prop="stepSort" />
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <el-table-column label="工序" align="center" prop="step" />
      <el-table-column label="工序名称" align="center" prop="stepName" />
      <el-table-column label="机台(id)" align="center" prop="eqpid" >
        <template slot-scope="scope">
          <dt-tag :options="eqpArr" :value="scope.row.eqpid"/>
        </template>
    </el-table-column>


      <el-table-column label="是否启用发料批" align="center" prop="flflag" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.flflag"/>
        </template>
      </el-table-column>
      <el-table-column label="发料批次(id)" align="center" prop="flbatch" >
        <template slot-scope="scope" v-if="scope.row.flflag == 'Y'">
          <dt-tag :options="flArr" :value="scope.row.flbatch"/>
        </template>
      </el-table-column>
      <el-table-column label="是否启用浆料批次" align="center" prop="jlflag" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.jlflag"/>
        </template>
      </el-table-column>
      <el-table-column label="一三道浆料" align="center" prop="jlbatchA" >
        <template slot-scope="scope"  v-if="scope.row.jlflag == 'Y'">
          <dt-tag :options="jlArr13" :value="scope.row.jlbatchA"/>
        </template>
      </el-table-column>
      <el-table-column label="二四道浆料(id)" align="center" prop="jlbatchB" >
        <template slot-scope="scope"  v-if="scope.row.jlflag == 'Y'">
          <dt-tag :options="jlArr24" :value="scope.row.jlbatchB"/>
        </template>
      </el-table-column>
      <el-table-column label="是否启用网版批次" align="center" prop="wbflag" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.wbflag"/>
        </template>
      </el-table-column>
      <el-table-column label="一道网版(id)" align="center" prop="wbbatchA">
        <template slot-scope="scope" v-if="scope.row.wbflag == 'Y'">
          <dt-tag :options="wbArr1" :value="scope.row.wbbatchA"/>
        </template>
      </el-table-column>
      <el-table-column label="二道网版(id)" align="center" prop="wbbatchB" >
        <template slot-scope="scope" v-if="scope.row.wbflag == 'Y'">
          <dt-tag :options="wbArr2" :value="scope.row.wbbatchB"/>
        </template>
      </el-table-column>
      <el-table-column label="三道网版(id)" align="center" prop="wbbatchC" >
        <template slot-scope="scope" v-if="scope.row.wbflag == 'Y'">
          <dt-tag :options="wbArr3" :value="scope.row.wbbatchC"/>
        </template>
      </el-table-column>
      <el-table-column label="四道网版(id)" align="center" prop="wbbatchD" >
        <template slot-scope="scope" v-if="scope.row.wbflag == 'Y'">
          <dt-tag :options="wbArr4" :value="scope.row.wbbatchD"/>
        </template>
      </el-table-column>
      <el-table-column label="是否完工" align="center" prop="endflag" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.endflag"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="false">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:processroute:edit']"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 添加或修改工艺路线对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="85%" append-to-body>

      <div class="itxst" style="width: auto;min-height: 80vh;">
        <div class="col" style="width: 96%;margin-bottom: 5px;" >
        <div class="title">工艺路线</div>
        <el-form ref="form" :model="form" :rules="mainrules" label-width="160px" :inline="true">

        <el-form-item label="工艺路线名称" prop="routeName">
          <el-input v-model="form.routeName" placeholder="请输入工艺路线名称" />
        </el-form-item>
        <!-- <el-form-item label="工艺路线类型" prop="routeType">
          <el-input v-model="form.routeType" placeholder="工艺路线类型" />
        </el-form-item> -->
      </el-form>

      </div>
      <div class="col" style="width: 15%;min-height:60vh  ;height: auto;">
        <div class="title">工序数据</div>
        <draggable v-model="stepArr" :group="groupA"  :options="{sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd">
          <transition-group :style="style">
            <div class="item" v-for="item in stepArr" :key="item.id">{{item.step}}-{{ item.stepName }}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col" style="width: 35%;min-height:60vh  ;height: auto;">
        <div class="title">路线绘制<span style="color: purple;font-weight: 100;font-size: 14px;margin: 10px;">点击拖拽</span></div>
        <draggable v-model="routeStepArr" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd" @add="onAdd">
          <transition-group :style="style">
            <div class="item" v-for="(item, index) in routeStepArr" :key="item.id" @click="check(index)">
              <el-checkbox v-model="item.checked" size="medium" style="margin-right: 5px;"></el-checkbox>
              <el-tag>{{ index+1 }}</el-tag>{{ item.step }}-{{ item.stepName }}
              <el-button type="danger" icon="el-icon-delete" circle size="mini" @click.stop="rmove(index)"
                style="float: right"></el-button>
            </div>
          </transition-group>
        </draggable>
        <div v-show="!routeStepArr.length" class="empty-info">
                从左侧工序数据中拖入或点选组件进行工艺路线绘制
              </div>
      </div>

      <div class="col" style="width: 44%;min-height:60vh  ;height: auto;">
        <div class="title">工序配置</div>

        <el-form v-show="curIndex == index"   v-for="(routeStep,index) in routeStepArr" :key="routeStep.id" :ref="'form'+index" :model="item" :rules="rules" label-width="120px" :inline="true">
          <el-form-item label="工序" prop="step">
          <el-input v-model="routeStep.step" placeholder="请输入工序" disabled/>
        </el-form-item>
        <el-form-item label="工序名称" prop="stepName">
          <el-input v-model="routeStep.stepName" placeholder="请输入工序名称" disabled/>
        </el-form-item>
        <el-row>
        <el-form-item label="设备" prop="eqpid" >
          <el-select
            v-model="routeStep.eqpid"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择设备">
            <el-option
              v-for="item in filterdEqpArr"
              :key="item.id"
              :label="item.eqpId"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="是否完工" prop="endflag">
          <el-switch  v-model="routeStep.endflag"  active-color="#13ce66" active-value="Y" inactive-value="N" disabled></el-switch>
        </el-form-item>
          <el-form-item label="启用发料批" prop="flflag">
          <el-switch  v-model="routeStep.flflag"  active-color="#13ce66"  active-value="Y" inactive-value="N" disabled></el-switch>
        </el-form-item>
        <el-form-item label="发料批次" prop="flbatch" v-if="'Y' == routeStep.flflag">
          <el-select
            v-model="routeStep.flbatch"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="">
            <el-option
              v-for="item in flArr"
              :key="item.id"
              :label="item.flbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        </el-row>
        <el-row>
        <el-form-item label="启用浆料批次" prop="jlflag">
          <el-switch  v-model="routeStep.jlflag"  active-color="#13ce66"  active-value="Y" inactive-value="N"></el-switch>

        </el-form-item>
        <el-form-item label="一三道浆料" prop="jlbatchA" v-if="'Y' == routeStep.jlflag">
          <el-select
            v-model="routeStep.jlbatchA"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择一三道浆料">
            <el-option
              v-for="item in jlArr13"
              :key="item.id"
              :label="item.jlbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二四道浆料" prop="jlbatchB" v-if="'Y' == routeStep.jlflag">
          <el-select
            v-model="routeStep.jlbatchB"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择二四道浆料">
            <el-option
              v-for="item in jlArr24"
              :key="item.id"
              :label="item.jlbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="启用网版批次" prop="wbflag">
          <el-switch  v-model="routeStep.wbflag"  active-color="#13ce66"  active-value="Y" inactive-value="N"></el-switch>
        </el-form-item>
        <el-form-item label="一道网版(id)" prop="wbbatchA" v-if="'Y' == routeStep.wbflag">
          <el-select
            v-model="routeStep.wbbatchA"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择一道网版(id)">
            <el-option
              v-for="item in wbArr1"
              :key="item.id"
              :label="item.wbbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二道网版(id)" prop="wbbatchB" v-if="'Y' == routeStep.wbflag">
          <el-select
            v-model="routeStep.wbbatchB"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择二道网版(id)">
            <el-option
              v-for="item in wbArr2"
              :key="item.id"
              :label="item.wbbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三道网版(id)" prop="wbbatchC" v-if="'Y' == routeStep.wbflag">
          <el-select
            v-model="routeStep.wbbatchC"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择三道网版(id)">
            <el-option
              v-for="item in wbArr3"
              :key="item.id"
              :label="item.wbbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="四道网版(id)" prop="wbbatchD" v-if="'Y' == routeStep.wbflag">
          <el-select
            v-model="routeStep.wbbatchD"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择四道网版(id)">
            <el-option
              v-for="item in wbArr4"
              :key="item.id"
              :label="item.wbbatch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="test" v-if="false">test</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProcessroute,listroute, getProcessroute, delProcessroute,delByRouteId, addProcessroute, updateProcessroute } from "@/api/system/processroute";
import { listAStep, getAStep } from "@/api/system/aStep";
import { listAwarefl, getAwarefl } from "@/api/system/awarefl";
import { listAwarejl, getAwarejl} from "@/api/system/awarejl";
import { listAwarewb, getAwarewb } from "@/api/system/awarewb";
import { listAEqp, getAEqp} from "@/api/system/aEqp";
import draggable from 'vuedraggable'
import { options } from "runjs";
import { watch } from "vue";
export default {
    //注册draggable组件
    components: {
    draggable,
  },
  name: "Processroute",
  dicts: ['sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      detailLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺路线表格数据
      routeList:[],
      processrouteList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        groupId: null,
        step: null,
        eqpid: null,
        routeId: null,
        routeName: null,
        stepName: null,
        routeType: null
      },
      // 表单参数
      form: {},
      formArr: [],
      // 表单校验
      mainrules: {
        routeName: [
          { required: true, message: "工艺路线名称不能为空", trigger: "blur" }
        ],
      },
      rules: {
        eqpid: [
          { required: true, message: "设备不能为空", trigger: "blur" }
        ],
        step: [
          { required: true, message: "工序不能为空", trigger: "blur" }
        ],
        flbatch: [
          { required: true, message: "发料批次不能为空", trigger: "blur" }
        ],
        wbbatchA: [
          { required: true, message: "一道网版批次不能为空", trigger: "blur" }
        ],
        wbbatchB: [
          { required: true, message: "二道网版批次不能为空", trigger: "blur" }
        ],
        wbbatchC: [
          { required: true, message: "三道网版批次不能为空", trigger: "blur" }
        ],
        wbbatchD: [
          { required: true, message: "四道网版批次不能为空", trigger: "blur" }
        ],
        jlbatchA: [
          { required: true, message: "一三道批次不能为空", trigger: "blur" }
        ],
        jlbatchB: [
          { required: true, message: "二四道批次不能为空", trigger: "blur" }
        ],
      },
      curIndex: undefined,
      drag: false,
      groupA: {
        name: 'site',
        pull: 'clone', //可以拖从
        put: false//可以拖出
      },
      groupB: {
        name: 'site',
        pull: true,
        put: true
      },
      options: [{value: '1', label: '发料'},{value: '2', label: '发料+发料'}],
      //定义要被拖拽对象的数组
      eqpArr: [],
      filterdEqpArr: [],
      stepArr: [],
      jlArr: [{ id: 1, name: '浆料A', code: 'BT', checked: false }, { id: 2, name: '浆料B', code: 'DF', checked: false }, { id: 3, name: '浆料C', code: 'SE', checked: false }],
      jlArr13:[],
      jlArr24:[],
      wbArr: [{ id: 1, name: '网版A', code: 'BT', checked: false }, { id: 2, name: '网版AB', code: 'DF', checked: false }, { id: 3, name: '网版AC', code: 'SE', checked: false }],
      wbArr1:[],
      wbArr2:[],
      wbArr3:[],
      wbArr4:[],
      flArr: [{ id: 1, name: '发料批A', code: 'BT', checked: false }, { id: 2, name: '发料批AB', code: 'DF', checked: false }, { id: 3, name: '发料批AC', code: 'SE', checked: false }],
      routeStepArr: [], //空数组
      curIndex: -1,
      tempId:0,
      //空数组之在的样式，设置了这个样式才能拖入
      style: 'min-height:120px;display: block;'
    };
  },
  watch: {
    curIndex:function(curIndex){
      if (curIndex >= this.routeStepArr.size || curIndex < 0) {
        this.filterdEqpArr =  [];
      }else{
        this.filterdEqpArr =  this.eqpArr.filter(item => {
            return item.step == this.routeStepArr[curIndex].step;
          });
      }

    },
  },
  computed: {
    // 计算属性 getter
    filterdEqpArr() {
      if (this.curIndex >= this.routeStepArr.size || this.curIndex < 0) {
        return [];
      }
      return this.eqpArr.filter(item => {
        return item.step == this.routeStepArr[this.curIndex].step;
      });
    }
  },
  created() {
    this.getList();
    this.getFlList(null);
    let jlParam = {
      pageNum: 1,
      pageSize: 1000,
      ifEnough: '1'
    }
    this.getJlList(jlParam);
    let wbParam = {
      pageNum: 1,
      pageSize: 1000,
      ifEnough: '1'
    }
    this.getWbList(wbParam);
    this.getEqpList(null);
  },
  methods: {

    //开始拖拽事件
    onStart(evt) {
      console.log('开始拖拽',evt)
      this.drag = true;
    },
    //拖拽结束事件
    onEnd(evt) {
      console.log('结束拖拽',evt)
      this.drag = false;
      this.routeStepArr = JSON.parse(JSON.stringify(this.routeStepArr))
      this.routeStepArr[evt.newIndex].id = new Date().getTime()

      for (let i = 0; i < this.routeStepArr.length; i++) {
        if(i==0){
          this.routeStepArr[i].flflag = 'Y'
        }else{
          this.routeStepArr[i].flflag = 'N'
        }
        if(i==this.routeStepArr.length-1){
          this.routeStepArr[i].endflag = 'Y'
        }else{
          this.routeStepArr[i].endflag = 'N'
        }
      }
      this.check(evt.newIndex)
    },
    onAdd(evt) {
      console.log('onAdd',evt)
      console.log('this.routeStepArr',this.routeStepArr)
      this.tempId = this.tempId + 1
    },
    remove(index) {
      this.arr2.splice(index, 1)
    },
    // 判断当前索引是否被选中
    check(index) {
      console.log("check")
      this.curIndex = index;
      for (let i = 0; i < this.routeStepArr.length; i++) {
        if (i == index) {
          this.routeStepArr[i].checked = true
        } else {
          this.routeStepArr[i].checked = false
        }
      }
      console.log("check"+this.curIndex )
      console.log(this.routeStepArr)
      //强制刷新vue视图 this.routeStepArr
      this.$nextTick(() => {
        // this.routeStepArr = this.routeStepArr
      });
    },
    test(){
      this.routeStepArr[1].stepName = "淹没"
    },
    /** 查询工艺路线列表 */

    getList() {
      this.loading = true;
      listroute(this.queryParams).then(response => {
        this.routeList = response.rows;
        this.total = response.total;
        this.loading = false;
        if(response.total > 0){
          this.getDetailList(this.routeList[0].routeId)
          this.$refs.mainTable.setCurrentRow(response.rows[0])
        }

      });
    },
    getDetailList(routeId) {
      this.detailLoading = true;
      let param = {
        routeId: routeId,
         pageSize: 50,
      }
      listProcessroute(param).then(response => {
        this.processrouteList = response.rows;
        this.total = response.total;
        this.detailLoading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        groupId: null,
        processid: null,
        route: null,
        step: null,
        jlflag: null,
        jlbatchA: null,
        jlbatchB: null,
        wbflag: null,
        wbbatchA: null,
        wbbatchB: null,
        wbbatchC: null,
        wbbatchD: null,
        flflag: null,
        flbatch: null,
        eqpid: null,
        routeId: null,
        routeName: null,
        stepSort: null,
        endflag: null,
        stepName: null,
        routeType: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleRowclick(row, column, event){
      //将该行高亮显示
      this.getDetailList(row.routeId);
      this.$refs.mainTable.setCurrentRow(row)
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加工艺路线";
      let param =     {
        pageNum: 1,
        pageSize: 10000,
        id: null,
        groupId: null,
        step: null,
        stepName: null,
      };
      this.getStepList(param);
      this.reset();
      this.routeStepArr = []

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.routeStepArr = []
      const id = row.id || this.ids
      getProcessroute(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改工艺路线";
      });
      listProcessroute({routeId: row.routeId}).then(response => {
        this.routeStepArr = response.rows;
        this.check(0)
      });
      let param =     {
        pageNum: 1,
        pageSize: 10000,
        id: null,
        groupId: null,
        step: null,
        stepName: null,
      };
      this.getStepList(param);
    },
    getStepList(param) {
      listAStep(param).then(response => {
        this.stepArr = response.rows;
        for (const step of this.stepArr) {
          step.checked = false
        }
      });
    },
    getFlList(param) {
      listAwarefl(param).then(response => {
        for (const item of response.rows) {
          item.value = ''+item.id,
          item.label = ''+item.flbatch
        }
        this.flArr = response.rows;
      });
    },
    getJlList(param) {
      listAwarejl(param).then(response => {
        for (const item of response.rows) {
          item.value = ''+item.id,
          item.label = ''+item.jlbatch
        }
        this.jlArr = response.rows;
        for (const row of response.rows) {
          if("一三道浆料" == row.jltype){
            this.jlArr13.push(row)
          }
          if("二四道浆料" == row.jltype){
            this.jlArr24.push(row)
          }
        }
      });
    },
    getWbList(param) {
      listAwarewb(param).then(response => {
        console.log("response.rows",response.rows)
        for (const item of response.rows) {
          item.value = ''+item.id,
          item.label = ''+item.wbbatch
        }
        this.wbArr = response.rows;
        for (const row of response.rows) {
          if("一道网版" == row.wbtype){
            this.wbArr1.push(row)
          }
          if("二道网版" == row.wbtype){
            this.wbArr2.push(row)
          }
          if("三道网版" == row.wbtype){
            this.wbArr3.push(row)
          }
          if("四道网版" == row.wbtype){
            this.wbArr4.push(row)
          }
        }
      });
    },
    getEqpList(param) {
      listAEqp(param).then(response => {
        for (const item of response.rows) {
          item.value = ''+item.id,
          item.label = ''+item.eqpId
        }
        this.eqpArr = response.rows;
      });
    },

    /** 提交按钮 */
    submitForm() {
      let validFlag = true;
      this.$refs["form"].validate(valid => {
          if(!valid){
            validFlag = false;
          }
        });

      //验证动态表单
      for (let i = 0; i < this.routeStepArr.length; i++) {
        const formref = `form${i}`;
        const formComponent = this.$refs[formref];

        if (formComponent ) {
          formComponent[0].validate(valid => {
            if (!valid) {
              validFlag = false;
              this.curIndex = i;
            }
          });
        } else {
          console.error(`表单 ${formref} 未找到或未正确绑定！`);
          validFlag = false;
        }
      }

      for (let i = 0; i < this.routeStepArr.length; i++) {
        if(this.routeStepArr[i].checked){
          // valid = false
          // break
        }
      }
      // if(!validFlag){
      //   this.$modal.msgError("表单校验不通过，请完善信息");
      //   return validFlag;
      // }
      for (let i = 0; i < this.routeStepArr.length; i++) {
        this.routeStepArr[i].groupId = this.form.groupId
        this.routeStepArr[i].routeId = this.form.routeId
        this.routeStepArr[i].routeName = this.form.routeName
        this.routeStepArr[i].stepSort = i + 1
      }

    if (validFlag==true) {
      if (this.form.id != null) {
        updateProcessroute(this.routeStepArr).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        for (let i = 0; i < this.routeStepArr.length; i++) {
          this.routeStepArr[i].id = null;
        }
        addProcessroute(this.routeStepArr).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    }

    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除工艺路线名称为"' + row.routeName + '"的数据项？').then(function() {
        return delByRouteId(row.routeId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handleDelete2(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除工艺路线编号为"' + ids + '"的数据项？').then(function() {
        return delProcessroute(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/processroute/export', {
        ...this.queryParams
      }, `processroute_${new Date().getTime()}.xlsx`)
    },
    rmove(index){
      this.routeStepArr.splice(index, 1)
      this.$nextTick(() => {
        // this.routeStepArr = this.routeStepArr
      });
    }
  }
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: rgb(229, 255, 0) !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  margin: 10px;

}

.title {
  padding: 6px 12px;
  font-weight: bold;
  font-size: 18px;
}

.col {
  width: 30%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col+.col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item-checked {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #0d25fab4;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item+.item {
  border-top: none;
  margin-top: 6px;
}

.empty-info {

  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  color: #ccb1ea;
  letter-spacing: 4px;
}
     /*将小箭头的样式去去掉*/
     .el-icon-arrow-up:before {
        content: '';
    }
</style>
